<template>
	<view class="shop_page">
		<view class="top">
			<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/31.png" mode="" @click="returnPage"></image>
			<text class="title">{{fname}}</text>
		</view>
		<view class="shop_list">
			<view class="shop_head">
				<view class="shop_item" v-for="(item, index) in shopList" :key="index">
					<view class="left">
						<view class="left_img">
							<image v-if="item.image.substr(1,7)=='uploads'" :src="Config_ysy.oldUrl +item.image" mode=""></image>
							<image v-if="item.image.substr(1,3)=='img'" :src="Config_ysy.cosurl +item.image" mode=""></image>
						</view>
						<view class="left_con">
							<view class="name">{{ item.name }}</view>
							<view class="tuijie">
								<sx-rate
									class="sx-rate"
									disabled
									:default-color="color.default"
									:max="maxNum"
									:active-color="color.active"
									:value="Number(item.star)"
									fontSize="24upx"
								/>
								<!-- <text >{{ item.coll }}人收藏</text> -->
							</view>
						</view>
					</view>
					<view class="right" @click="toDeata(item)">进店</view>
				</view>
			</view>
			<view class="" style="display: flex;justify-content: center;align-items: center;font-size: 28upx;color: #C0C0C0;" v-if="shopList.length==0">
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
import SxRate from '@/components/sx-rate';
export default {
	components:{
		SxRate,
	},
	data() {
		return {
			token: '',
			fname: '',
			shop_id: 907,
			id:null,
			maxNum: 5,
			color: {
				default: '#ccc',
				active: '#F40C0C'
			},
			shopList:[]
		};
	},
	onLoad(option) {
		this.token = option.token;
		this.shop_id=option.shop_id
		this.fname = option.name;
		this.getData()
	},
	methods: {
		returnPage() {
			uni.navigateBack({
				delta: 1
			});
		},
		toDeata(item){
			uni.navigateTo({
				url:'../shop_detail/shop_detail?shop_id='+item.id+'&token='+this.token+'&name='+item.name
			})
		},
		getData(){
			let url="/api/goods/goods/shop_list"
			let params={
				token:this.token,
				shop_id:this.shop_id
			}
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				if(res.data.code==1){
					this.shopList=res.data.data
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
		background-color: #f6f6f6;
	}
.shop_page {
	.top {
		width: 750upx;
		height: 180upx;
		background: url(https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_user/new_bjs.png) no-repeat;
		background-size: 750upx 180upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 60upx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.title {
			font-size: 30upx;
			color: #ffffff;
			margin-left: 30upx;
		}

		image {
			width: 24upx;
			height: 40upx;
			margin-left: 20upx;
		}
	}
	.shop_list {
		width: 750upx;
		margin-top: 200upx;
		.shop_head {
			width: 750upx;
			.shop_item {
				width: 690upx;
				margin: 0 auto 30upx;
				padding: 15upx;
				background: #ffffff;
				border-radius: 20upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.left_img {
						image {
							width: 80upx;
							height: 82upx;
							border-radius: 15upx;
						}
					}
					.left_con {
						margin-left: 20upx;
						.name {
							font-size: 30upx;
							font-weight: bold;
							color: #323230;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 290upx;
						}
						.tuijie {
							margin-top: 20upx;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							text {
								margin-left: 25upx;
								font-weight: 400;
								color: #767574;
								font-size: 20upx;
							}
						}
					}
				}
				.right {
					width: 95upx;
					height: 49upx;
					border: 2upx solid #ec251a;
					border-radius: 25upx;
					font-size: 26upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #ea2c20;
					text-align: center;
					line-height: 49upx;
				}
			}
		}
		.goods_bot {
			margin-top: 30upx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			.goods_item {
				width: 31%;
				height: 216upx;
				position: relative;
				.goods_img {
					width: 100%;
					height: 100%;
					border-radius: 15upx;
				}
				.price {
					position: absolute;
					bottom: 5upx;
					left: 0;
					border-radius: 30upx;
					padding: 10upx 20upx;
					height: 50upx;
					font-size: 28upx;
					color: #fff;
				}
			}
		}
	}
}
</style>
